<template>
	<view class="page">
		<view class="lottery-news">
			
			<block v-if="lottery_news">
				<swiper class="news-list" autoplay interval="2000" circular vertical disable-touch :display-multiple-items="2">
					<swiper-item v-for="(v, k) in lottery_news" :key="k">
						<view class="item flex f-a-center">
							<image class="userimg" :src="v.head_pic_text"></image>
							<image class="redpacket" src="../../static/icons/redpacket.png"></image>
							<view class="item-text f-one-ellipsis">{{v.str}}</view></view>
					</swiper-item>
				</swiper>
			</block>
		</view>
		
		<view class="lottery-alert" v-if="goods.length>0">
			<view class="content">
				<swiper class="goods-cont" autoplay circular previous-margin="204rpx" :current="moveIndex" next-margin="204rpx" @animationfinish="animationfinish">
					<swiper-item v-for="(item,index) in goods" :key="index">
						<view class="goods-cont-img" :class="{goodsScale:index == moveIndex}">
							<image class="goods-cont-img-pic"  :src="item.thumb"></image>
						</view>
						<view class="goods-cont-info" :class="{goodsMove:index == moveIndex}">
							<view class="goods-cont-info-name f-one-ellipsis">{{item.goods_name}}</view>
							<view class="goods-cont-info-mprice">零售价：￥{{item.market_price}}</view>
							<view class="goods-cont-info-yprice">优品价:￥{{item.shop_price}}</view>
						</view>
					</swiper-item>
				</swiper>
				
				<view class="goods-cont-btnlist" >
					<view class="goods-cont-btnlist-item" v-for="(item,index) in goods" :key="index" v-if="index == 0">
						<uni-number-box typePage="lottery" :index="index" :min="item.draw_price" :step="item.draw_price" :max="9999999" :value="item.count" @change="numberChange"></uni-number-box>
						<view class="goods-cont-info-btn" :class="{gay:!isCanBuy}" @tap="pickBtn(index)">立即参与</view>
					</view>
				</view>
			</view>
		</view>
		<view class="lottery-noticeBar">
			<uni-notice-bar :speed="50" v-if="newsText" background-color="rgba(0, 0, 0, 0.2)" color="#ffffff" scrollable="true" single="true" :text="newsText"></uni-notice-bar>
		</view>
		
		<navigator open-type="navigate" url="/pages/jewel/goods/prolist?is_seller=1" hover-class="none" class="lottery-bannerEnter">
			<image src="https://jewel.gdhenglang.com/uploads/seller_in.jpg" mode="widthFix"></image>
		</navigator>
		
		<uni-transition :duration="500" :mode-class="modeClass" :styles="transfromClass" :show="transShow">
			<view class="lottery-redpack">
				<image class="lottery-redpack-bg" src="../../static/images/lottery_draw/redpack_bg.png"></image>
				<!-- <image class="lottery-redpack-open" v-if="isShowOpen" :class="{'open-animation':isOpen}" @tap="openAnimation" src="../../static/images/lottery_draw/redpack_open.png"></image> -->
				<uni-transition :duration="500" :mode-class="modeClass" :show="!isShowOpen && !isOpenShareRed" class="lottery-redpack-tips">
					<view class="lottery-redpack-tips-text">获得优品红包</view>
					<view class="lottery-redpack-tips-money">￥{{redPackMoney}}</view>
				</uni-transition>
				
				<uni-transition :duration="500" :mode-class="modeClass" :show="isOpenShareRed" class="lottery-redpack-tips">
					<view class="lottery-redpack-tips-text">获得扫码红包</view>
					<view class="lottery-redpack-tips-money">￥{{saomaRedPackMoney}}</view>
				</uni-transition>
				
				<view class="lottery-redpack-btns flex f-j-center" v-if="!isShowOpen">
					<!-- <view class="lottery-redpack-btns-item left" v-if="isGetMore" @tap="getMore">节日红包</view> 
					<view class="lottery-redpack-btns-item left" v-if="!isGetMore" @tap="onTap">继续参与</view>-->
					<view class="lottery-redpack-btns-item left" @tap="onTap">继续参与</view>
					<view class="lottery-redpack-btns-item right" v-if="isCanShare" @tap="showShare">分享得红包</view>
				</view>
				
				<view class="lottery-redpack-moneylist">
					<view class="lottery-redpack-moneylist-item" :class="'money'+index" v-for="(money,index) in moneylist" :key="index">¥{{money}}</view>
				</view>
				<image class="lottery-redpack-bgLight" src="../../static/images/lottery_draw/bgLight.png"></image>
			</view>
			
		</uni-transition>
		
		
		<view class="lottery-functionList">
			<view class="lottery-functionList-list" :class="{show:!showFunction}">
				<navigator hover-class="none" url="/pages/user/lottery_buylist" class="lottery-functionList-item">
					<image class="lottery-functionList-item-icon" src="../../static/images/lottery_draw/f_record.png"></image>
					<view class="lottery-functionList-item-text">购买记录</view>
				</navigator>
				<navigator hover-class="none" url="/pages/user/lottery_getredPack" class="lottery-functionList-item">
					<image class="lottery-functionList-item-icon" src="../../static/images/lottery_draw/f_take.png"></image>
					<view class="lottery-functionList-item-text">领取红包</view>
				</navigator>
				<navigator hover-class="none" url="/pages/user/getLifeRedpack" class="lottery-functionList-item">
					<image class="lottery-functionList-item-icon" src="../../static/images/lottery_draw/f_redpack.png"></image>
					<view class="lottery-functionList-item-text">红包津贴</view>
				</navigator>
				<view @tap="ruleToggle" class="lottery-functionList-item">
					<image class="lottery-functionList-item-icon" src="../../static/images/lottery_draw/f_rule.png"></image>
					<view class="lottery-functionList-item-text">抽奖规则</view>
				</view>
			</view>
			<view class="lottery-functionList-arrow" @tap="functionToggle">
				<arrow size="50" :direction="showFunction?'bottom':'top'" color="#4c4c4c" class="lottery-functionList-arrow-item"></arrow>
				<arrow size="50" :direction="showFunction?'bottom':'top'" color="#4c4c4c" class="lottery-functionList-arrow-item"></arrow>
			</view>
		</view>
		
		
		<!-- <view class="lottery-rule-btn flex f-j-center f-a-center" @tap="ruleToggle">抽奖规则<arrow size="40" color="#ffffff" :direction="isRuleToggle?'top':'bottom'"></arrow></view> -->
		
		<uni-transition :duration="500" :mode-class="modeClass" :styles="transfromClass" :show="isRuleToggle">
			<view class="lottery-rule">
				<view class="rule-cont">
					<view class="rule-title">—— 活动规则 ——</view>
					<view class="rule-text" v-html="ruleData"></view>
				</view>
				<view class="lottery-rule-close"><image src="../../static/icons/jewel/sign_close.png" @tap="ruleToggle"></image></view>
			</view>
		</uni-transition>
		
		<!-- <view class="lottery-bottomBtns flex f-a-center f-j-center">
			<navigator open-type="navigate" url="/pages/user/lottery_buylist" hover-class="none" class="lottery-bottomBtns-btn">购买纪录</navigator>
			<navigator open-type="navigate" url="/pages/user/lottery_getredPack" hover-class="none" class="lottery-bottomBtns-btn">领取红包</navigator>
		</view>
		<view class="lottery-bottomBtns">
			<navigator open-type="navigate" url="/pages/user/getLifeRedpack" hover-class="none" class="lottery-bottomBtns-btn lottery-bottomBtns-otherbtn">红包生活津贴 >></navigator>
		</view> -->
		
		
		<!-- 支付方式 -->
		<view class="awardlist-record" :class="{show:isShowPayway}">
			<view @tap="showToggle('pay')">
				<close class="close" size="32" color="#535353" ></close>
			</view>
			<view class="title">支付方式</view>
			<view class="pay-box">
			    <view class="pay-item" 
					@tap="togglePay" v-for="(item,index) in payList" 
					:data-type="item.type"
			        :key="index"
				>
					<view class="item-title">
						<image :src="item.icon_text"></image>
						<view class="item-text">{{item.name}}</view>
					</view>
					<view class="item-pay-icon">
						<image :src="paytype == item.type ? '../../static/icons/pay-select-act.png' : '../../static/icons/pay-select.png'"></image>
					</view>
			    </view>
			</view>
			<view class="btn" :class="{gay:!paytype}" @tap="payUp">支付(¥{{totalMoney}})</view>
		</view>
		
		
		<!-- 分享弹框 -->
		<view class="g-popup-share" :class="{zShow:isShowShare}">
			<view class="g-share-type">
				<button @tap="share('weixin','WXSceneSession')">
					<image src="../../static/icons/wxpay.png" mode="widthFix"></image>
					<view>微信好友</view>
				</button>
				<button @tap="share('weixin','WXSenceTimeline')">
					<image src="../../static/icons/weixin_friend.png" mode="widthFix"></image>
					<view>朋友圏</view>
				</button>
			</view>
			<button class="u-share-cancel" @tap="showToggle('share')">取消</button>
		</view>
		
		<view class="g-lottery-cont" v-if="isShowInput">
			<view class="g-lottery-cont-input">
				参与额度<input type="number" placeholder="请输入参与额度" v-model="JoinNum" />
			</view>
			<view class="g-lottery-cont-btns">
			    <view class="g-lottery-cont-btns-item" @tap="showToggle('input')">取消</view>
			    <view class="g-lottery-cont-btns-item" @tap="confirm">确定</view>
			</view>
		</view>
		
		<view class="m-loading" v-if="isShowLoading">
		    <image src="../../static/images/loading.gif" mode="widthFix"></image>
			<text>加载中</text>
		</view>
		
		<uni-transition :mode-class="['fade']" :styles="maskClass" :show="isShowMark"/>
		<view class="redPackRain" v-if="isShowRain" @tap="ClickRain"><image src="../../static/images/lottery_draw/redrain.gif" mode="widthFix"></image></view>
		
		<uni-transition :mode-class="['cattleyear']" :styles="maskClass" :show="isShowCattle"/>
		<view class="redPackRainCattle" v-if="isShowRedCattle" @tap="ClickCattle"><image src="../../static/images/lottery_draw/redcattle.gif" mode="widthFix"></image></view>
		
	</view>
</template>

<script>
	var that;
	import henglang from '@/common/common_zb.js';
	export default {
	    data() {
	        return {
				JoinNum:100, //参与份数
				isShowPayway:false,
				payList: [],
				paytype: '',
				ruleData:'',
				order_no:'',
				openid:0,
				isShowLoading: false,
				isShowShare: false,
				isShowInput:false,
				infoData:{},
				lottery_news: [],
				goods:[],
				totalMoney:0,
				newsText:'',
				goodsIndex:0,
				modeClass:['fade','cattleyear'],
				transShow:false,
				transfromClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					/* #ifndef APP-NVUE */
					'display': 'flex',
					/* #endif */
					'justify-content': 'center',
					'align-items': 'center',
					'z-index':11
				},
				maskClass: {
					'position': 'fixed',
					'z-index':9,
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'background-color': 'rgba(0, 0, 0, 0.4)'
				},
				isOpen:false,
				isShowOpen:true,
				isShowMoney: false,
				redPackMoney:0,
				moveIndex:0,
				contHeight:480,
				adornList:[],
				isCanBuy:true,
				redPcakDrawId:'',
				member_id:uni.getStorageSync('userInfo').member_id,
				isCanShare:true,
				qrCode:'',
				is_saoma:0,
				saomaRedPackMoney:0,
				isRuleToggle:false,
				isOpenShareRed:false,
				isShowRain:false,
				isShowMark: false,
				isShowRedCattle:false,
				isShowCattle: false,
				moneylist:[],
				showFunction:false,
				isGetMore:false
	        }
	    },
		mounted() {
			that = this
		},
		methods:{
			animationfinish(e){
				this.moveIndex = e.detail.current;
			},
			openAnimation(){
				that.isShowOpen = false
				if(that.is_saoma == 1){
					setTimeout(()=>{
						uni.showLoading({
							mask:true,
							title:'扫码红包领取中...'
						})
						setTimeout(()=>{
							uni.hideLoading()
							that.isOpenShareRed = true
						},3000)
					},1000)
				}
			},
			onTap() {
				if(this.is_saoma == 1) this.is_saoma = 0
				this.isOpenShareRed = false
				this.transShow = !this.transShow
				this.isShowRain = false
				this.isShowInput = true
			},
			open(mode) {
				this.modeClass = mode
				this.transShow = !this.transShow
			},
			numberChange(e){
				that.goodsIndex = e.index
				that.goods[e.index].count = e.number
				if(e.index == 0) that.JoinNum = e.number
			},
			//切换支付方式
			togglePay(e) {
			    that.paytype = e.currentTarget.dataset.type;
			},
			//立即参与
			pickBtn(index){
				let that = this
				let totalMoney = that.goods[index].count
				if(!that.isCanBuy) return false
				that.goodsIndex = index
				that.JoinNum = totalMoney
				that.showToggle('input')
			},
			//检查是否绑定微信
			checkBindWx(){
				let that = this
				if(that.openid == 0){
					setTimeout(()=>{
						uni.login({
							provider: 'weixin',
							success: function(res) {
								let postData = {
									union_id: res.authResult.unionid,
									openid:res.authResult.openid,
									member_id:that.member_id
								}
								henglang.post('auth/bindOpenid',postData,false,function(res){
									that.isShowLoading = false;
									if (res.data.code == 0){
										henglang.showToast('绑定成功',1500)
										that.openid = 1
										that.isCanBuy = true
									}else{
										henglang.showToast(res.data.msg)
									}
								});
							}
						});
					},1500)
				}	
			},
			//支付
			payUp(){
				let that = this;
				let randomId = Math.floor(Math.random()*(Number(that.goods.length)-1)+0);
				let currentGood = that.goods[randomId]
				let sendData={
					goods_id:currentGood.id,
					pay_way:that.paytype,
					choose_item_id:0,
					draw_price:that.totalMoney,
					is_saoma:that.is_saoma
				};
				if(!sendData.pay_way){
					henglang.showToast('请选择支付方式')
					return false
				} 
				that.showToggle('pay') 
				if(sendData.pay_way == 'duolabao'){
					uni.navigateTo({
						url:'/pages/user/lottery_duolabao?totalMoney='+ that.totalMoney + '&goods_id=' + sendData.goods_id
					})
				}else{
					uni.showLoading({
						title:'加载中...',
						mask:true
					})
					new Promise((resolve, reject) => {
						henglang.post('Lottery/draw_buy',sendData,true,function(res){
							if(res.data.code <= -1) {
								uni.hideLoading()
								reject(res);
							} else {
								that.order_no= res.data.order_no;
								resolve(res);
							}
						});
					}).then((res) => {
							that.is_saoma = res.data.data.is_saoma
							if(res.data.code >= 0){
								switch (that.paytype) {
									case 'wxpay':
									case 'alipay':
										uni.requestPayment({
											provider: that.paytype,
											orderInfo: res.data.data.pay_data.data, //微信、支付宝订单数据,
											success: (res) => {
												that.checkIsLottery()
											},
											fail: (res) => {
												console.log(JSON.stringify(res))
												uni.hideLoading()
												henglang.showToast('支付失败');
											}
										})
										break;
									case 'treasure_chest':
										if(res.data.code == 0){
											that.checkIsLottery()
										}
									break;
								}
							}else if(res.data.code <= -1) {
								uni.hideLoading()
								henglang.showToast(res.data.msg);
							} 
					}, (res) => {
						uni.hideLoading()
						henglang.showToast(res.data.msg);
					})
				}
				
			},
			//控制显示多个弹框
			showToggle(type){
				this.isShowMark = !this.isShowMark
				switch(type){
					case 'pay':
					this.isShowPayway = !this.isShowPayway
					break;
					case 'share':
					this.isShowShare = !this.isShowShare
					break;
					case 'input':
					this.isShowInput = !this.isShowInput
					break;
				}
			},
			getGoodsData(){
				let that = this;
				that.isShowLoading = true;
				henglang.get('Goods/searchGoods',{is_lottery:1},false,function(res){
					that.isShowLoading = false;
					if(res.data.code == 0){
						that.goods = res.data.data
						that.contHeight = Math.ceil(that.goods.length / 2) * 340
						for (let i in that.goods) {
							that.goods[i].draw_price = Number(that.goods[i].draw_price)
							that.goods[i].count = Number(that.goods[i].draw_price)
							that.goods[i].market_price = parseInt(that.goods[i].market_price)
							that.goods[i].shop_price = parseInt(that.goods[i].shop_price)
						}
						if(that.is_saoma == 1){
							uni.showLoading({
								title:'加载中...',
								mask:true
							})
							setTimeout(()=>{
								uni.hideLoading()
								that.pickBtn(2)
							},1000)
						}
					}
				});
			},
			//检查是否中奖
			checkIsLottery(){
				let that = this
				that.moneylist = []
				henglang.post('Lottery/checkDraw',{order_no:that.order_no},true,function(res){
					uni.hideLoading()
					if(res.data.data.is_winning == 2){
						that.isShowRain = true
						that.isShowMark = true
						that.redPackMoney = res.data.data.money
						that.saomaRedPackMoney = res.data.data.saoma_red
						that.redPcakDrawId = res.data.data.draw_id
						that.isCanShare = res.data.data.share_state == 1?true:false
						that.isGetMore = res.data.data.get_more_red
						that.moneylist.push(res.data.data.money1,res.data.data.money2,res.data.data.money3,res.data.data.money4)
					}else{
						if(that.is_saoma == 1) that.is_saoma = 0
						uni.navigateTo({
							url:'/pages/user/lottery_buylist'
						})
					}
				});
			},
			//再领一次
			getMore(){
				let that = this
				that.isShowOpen = true
				setTimeout(()=>{
					henglang.post('Lottery/getMoreRed',{draw_id:that.redPcakDrawId},true,function(res){
						that.redPackMoney = res.data.data.money
						that.isGetMore = that.isShowOpen = false
					});
				},500)
			},
			showShare(){
				if(this.is_saoma == 1) this.is_saoma = 0
				this.isShowRain = false
				this.transShow = false
				this.isOpenShareRed = false
				this.isShowMark = false
				this.showToggle('share')
			},
			// 调用分享
			share(type, wx = '') { 
				let that = this
				let href = ''
				href = that.redPcakDrawId?that.infoData.share_url + '?share_pid=' + that.member_id + '&draw_id=' + that.redPcakDrawId:that.infoData.share_url + '?share_pid=' + that.member_id
				that.isShowLoading = true;
				if(that.redPcakDrawId){
					henglang.get('Lottery/set_share_info',{draw_id:that.redPcakDrawId},true,function(res){
						if(res.data.code == 0){
							uni.share({
							    provider: type,
							    scene: wx,
							    type: 0,
							    href: href,
							    title: that.infoData.share_title,
							    summary: that.infoData.share_desc,
							    imageUrl: that.infoData.share_img,
							    success: function(res) {
									that.isShowLoading = false
								},
							    fail: function(err) {
									that.isShowLoading = false
								}
							});
						}
					},function(err){
						that.isShowLoading = false;
						henglang.showToast('分享失败，请重试')
					})
				}else{
					that.isShowLoading = false
					uni.share({
					    provider: type,
					    scene: wx,
					    type: 0,
					    href: href,
					    title: that.infoData.share_title,
					    summary: that.infoData.share_desc,
					    imageUrl: that.infoData.share_img,
					    success: function(res) {
							that.isShowLoading = false
						},
					    fail: function(err) {
							that.isShowLoading = false
						}
					});
				} 
				setTimeout(()=>{
					that.showToggle('share')
				},3000)
			},
			
			confirm(){
				let that = this
				let totalMoney = that.goods[that.goodsIndex].count
				totalMoney = that.JoinNum
				that.showToggle('input')
				that.totalMoney = totalMoney
				if(that.totalMoney == 0){
					henglang.showToast('请确认参与额度',1500)
					return false
				}
				that.showToggle('pay')
				if(that.payList.length === 0){
					henglang.post('payment/payList',{goods_id:that.goods[that.goodsIndex].goods_id},true,function(res){
						that.payList = res.data.data;
					});
				}
			},
			getUrlParam(paraName) {
				var url = this.resResult;
				var arrObj = url.split("?");
				if (arrObj.length > 1) {
					var arrPara = arrObj[1].split("&");
					var arr;
					for (var i = 0; i < arrPara.length; i++) {
						arr = arrPara[i].split("=");
						if (arr != null && arr[0] == paraName) {
							return arr[1];
						}
					}
				}
				return "";
			},
			ruleToggle(){
				this.isShowMark = !this.isShowMark
				this.isRuleToggle = !this.isRuleToggle
			},
			ClickCattle(){
				let that = this
				that.isOpen = false
				that.isShowOpen = true
				that.isShowCattle = false
				that.isShowRedCattle = false
				uni.showLoading({
					title:'领取中...'
				})
				
				setTimeout(()=>{
					uni.hideLoading()
					that.open(['zoom-in','cattleyear'])
					that.openAnimation()
			
				},500) 
			},
			ClickRain(){
				uni.showLoading({
					title:'领取中...'
				})
				this.isOpen = false
				this.isShowOpen = true
				this.isShowRain = false
				setTimeout(()=>{
					uni.hideLoading()
					this.open(['zoom-in','fade'])
					this.openAnimation()	
					if(this.isGetMore){
						setTimeout(()=>{
							this.transShow = !this.transShow
							this.isShowRain = false
							this.isShowRedCattle = true
							this.isShowCattle = true
							
							henglang.post('Lottery/getMoreRed',{draw_id:that.redPcakDrawId},true,function(res){
								that.redPackMoney = res.data.data.money
								that.isGetMore = false
							});
							
						},2000)
					}
				},500)
			},
			functionToggle(){
				this.showFunction = !this.showFunction
			}
		},
		onLoad(option) {
			let that=this
			
			if(option.is_saoma) that.is_saoma = option.is_saoma
			//获取分享内容，规则说明
			henglang.get('Lottery/bookRule',{}, true, function(res){
				if(res.data.code == 0){
					that.ruleData = res.data.content;
					that.openid = res.data.data.openid
					that.infoData = {
						share_title:res.data.data.share_title,
						share_url:res.data.data.share_url,
						share_desc:res.data.data.share_desc,
						share_img:res.data.data.share_img
					}
					henglang.get('Lottery/check_weixin',{},true,function(res){
						if(res.data.code == -1){
							henglang.showToast(res.data.msg)
							that.isCanBuy = false
						}else if(res.data.code == -2){
							henglang.showToast(res.data.msg,1500)
							that.isCanBuy = false
							that.checkBindWx()
						}
					});
				}
			})
			//获取第一个滚动。拼购人
			
			henglang.get('Lottery/buyList',{},false,function(res){
				let arr = []
				for(let i in res.data.data){
					arr.push(res.data.data[i].str)
				}
				that.newsText = arr.join('\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0').toString()
			});
			//获取第二个滚动。获取红包
			henglang.get('Lottery/redList',{},false,function(res){
				that.lottery_news = res.data.data
			});
			//获取第二个滚动。获取红包
			henglang.get('Lottery/createYoupinCode',{},false,function(res){
				that.qrCode = res.data.data
			});
			that.getGoodsData();
			if(!that.member_id){
				henglang.get('member/getInfo',{},true,function(res){
					that.member_id = res.data.data.member_id
				})
			}
			
		},
		
		onNavigationBarButtonTap({index}) {
			switch(index){
				case 0:
					this.redPcakDrawId = ''
					this.isShowInput = this.isShowPayway = false
					this.isShowShare = this.isShowMark = true
				break;
				case 1:
					uni.scanCode({
						onlyFromCamera: true,
						success: function(res) {
							uni.navigateTo({
								url: '/pages/user/lottery_draw?is_saoma=1'
							});
							
						}
					});
				break;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex{
		display: flex;
	}
	.f-a-center{
		align-items: center;
	}
	.f-j-center{
		justify-content: center;
	}
	.page{
		width: 100%;
		height: 100%;
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: rgb(226, 200, 223);
		background-image: url(../../static/images/lottery_draw/bg.jpg);
	}
	.page-bg{
		position: absolute;
		top: 0;
		width: 100%;
		left: 0;
		height: 100%;
	}
	.lottery-news{
		width: 666rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		.news-list-bar{
			border-radius: 5px;
			overflow: hidden;
		}
		.news-list{
			width: 100%;
			height: 140rpx;
			.item{
				border-radius: 5px;
				overflow: hidden;
				background-color: rgba($color: #ce2b75, $alpha: 0.3);
				height: 60rpx;
				.redpacket{
					width: 28rpx;
					height: 32rpx;
					margin-left: 30rpx;
				}
				.userimg{
					border-radius: 5px 0 0 5px;
					width: 60rpx;
					height: 60rpx;
					display: block;
				}
				.item-text{
					line-height: 60rpx;
					color: #FFFFFF;
					white-space: nowrap;
					margin-left: 15rpx;
				}
				
			}
		}
	}
	.lottery-alert{
		width: 666rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		margin-bottom: 26rpx;
		border-radius: 10px;
		overflow: hidden;
		box-shadow:0px 0px 57rpx rgba(182,72,132, 0.27);
		padding: 25rpx;
		box-sizing: border-box;
		.content{
			border: 2px solid #d5aac4;
			border-radius: 10px;
			padding-bottom: 20rpx;
			position: relative;
			.c-title{
				color: #FFFFFF;
				font-size: 40rpx;
				width: 348rpx;
				height: 68rpx;
				line-height: 68rpx;
				margin: 0 auto;
				text-align: center;
				background-image: linear-gradient(145deg, #b676af, #ea669f, #f7c07e);
				border-radius: 0 0 10px 10px;
				margin-top: -2px;
			}
			.join-text{
				color: #2a2a2a;
				font-size: 50rpx;
				text-align: center;
			}
			.c-cont{
				margin-top: 17rpx;
				text-align: center;
				.join{
					.box-pic{
						width: 310rpx;
						height: 237rpx;
						margin-left: 40rpx;
						animation:move 3s 0s infinite;-webkit-animation:move 3s 0s infinite;transform-origin:bottom;-webkit-transform-origin:bottom;
					}
				}
				.wait,.open{
					.box-pic{
						width: 477rpx;
						height: 260rpx;
						margin-top: 20rpx;
						margin-left: 40rpx;
					}
					.text{
						font-size: 60rpx;
					}
				}
				.open{
					.box-pic{
						margin-top: 120rpx;
						
					}
				}
				.success{
					.box-pic{
						width: 327rpx;
						height: 298rpx;
						margin-left: 20rpx;
					}
					.text{
						font-size: 60rpx;
					}
					.en-text{
						font-size: 30rpx;
						color: #2a2a2a;
					}
				}
				.fail{
					.box-pic{
						width: 214rpx;
						height: 316rpx;
					}
					.text{
						font-size: 38rpx;
					}
				}
			}
			.c-copies{
				justify-content: space-between;
				padding: 0 10rpx;
				margin-top: 26rpx;
				height: 48rpx;
				.text{
					color: #2a2a2a;
					font-size: 30rpx;
				}
			}
			.c-btn{
				width: 490rpx;
				height: 105rpx;
				line-height: 105rpx;
				background-image: linear-gradient(145deg, #b676af, #ea669f, #f7c07e);
				color: #FFFFFF;
				font-size: 56rpx;
				text-align: center;
				border-radius: 100px;
				margin: 0 auto;
				margin-top: 40rpx;
			}
			.c-tips{
				text-align: center;
				color: #333333;
				font-size: 24rpx;
				padding: 15rpx 0;
				image{
					width: 35rpx;
					height: 35rpx;
					margin-right: 12rpx;
				}
			}
			.c-progress-tips{
				width: 450rpx;
				text-align: right;
				height: 60rpx;
				position: relative;
				margin-left: 64rpx;
				.text{
					position: absolute;
					left: 0;
					top: 0;
					transform: translateX(-50%);
					font-size: 30rpx;
					background: linear-gradient(145deg, #b676af, #ea669f, #f7c07e) !important;
					-webkit-background-clip: text !important;
					color: transparent !important;
					line-height: 60rpx;
					white-space: nowrap;
				}
			}
			.c-progress{
				height: 34rpx;
				text{
					color: #666666;
					font-size: 26rpx;
				}
				.cmd-progress{
					width: 450rpx;
					position: relative;
					height: 34rpx;
					margin: 0 4rpx;
				}
			}
			.c-wait-tips{
				color: #4c4c4c;
				font-size: 30rpx;
				text-align: center;
				line-height: 66rpx;
				margin-bottom: 30rpx;
			}
			.goods-slide{
				height: 380rpx;
				padding-top: 20rpx;
				&-item{
					text-align: center;
				}
				&-img{
					width: 280rpx;
					height: 264rpx;
					border-radius: 5px;
					display: inline-block;
				}
				&-text{
					color: #272727;
					font-size: 28rpx;
					text-align: center;
					padding: 20rpx;
				}
			}
		}
	}
	.gay{
		background-color: #cccccc !important;
		background-image: none !important;
	}	
	.lottery-list{
		width: 700rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		.list-title{
			color: #3a3a3a;
			font-size: 40rpx;
			text-align: center;
			line-height: 110rpx;
		}
		.list-cont{
			border: 1px solid #b96196;
			box-sizing: border-box;
			background-color: #ffffff;
			border-radius: 10px;
			overflow: hidden;
			text{
				width: 33.33%;
				text-align: center;
				position: relative;
			}
			.cont-head{
				height: 76rpx;
				background-color: #e098c2;
				border-bottom: 1px solid #b96196;
				color: #6c3053;
				font-weight: bold;
				font-size: 36rpx;
				text::after{
					content: '';
					position: absolute;
					top: 50%;
					right: 0;
					width: 2rpx;
					height: 36rpx;
					margin-top: -18rpx;
					background-color: #6c3053;
				}
				text:last-child::after{
					width: 0;
				}
			}
			.cont{
				max-height: 594rpx;
				.li{
					height: 66rpx;
					text{
						font-size: 28rpx;
						color: #1a1919;
					}
					&:nth-child(even){
						background-color: #eebad8;
					}
				}
			}
			
		}
	}
	
	.lottery-rule{
		width: 680rpx;
		box-sizing: border-box;
		margin: 0 auto;
		padding: 28rpx;
		margin-top: 32rpx;
		margin-bottom: 68rpx;
		.rule-cont{
			background-color: #FFFFFF;
			padding: 30rpx 0;
			border-radius: 10rpx;
			.rule-title{
				color: #2a2a2a;
				font-size: 40rpx;
				text-align: center;
				padding-bottom: 15rpx;
			}
			.rule-text{
				color: #554027;
				font-size: 30rpx;
				line-height: 45rpx;
				padding: 0 30rpx;
			}
		}
		&-btn{
			width: 260rpx;
			height: 62rpx;
			line-height: 62rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 40rpx;
			margin: 40rpx auto;
			background-image: linear-gradient(90deg, #d81212, #df5c12);
			border-radius: 60px;
			box-shadow: 0 4px 0 #870707;
		}
		&-close{
			image{
				width: 86rpx;
				height: 86rpx;
				display: block;
				margin: 0 auto;
				margin-top: 30rpx;
			}
		}
	}
	.lottery-bottomBtns{
		padding-bottom: 32rpx;
		&-btn{
			color: #FFFFFF;
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
			font-size: 38rpx;
			background-image: linear-gradient(145deg, #b676af, #ea669f, #f7c07e);
			width: 325rpx;
			border-radius: 60px;
			margin: 0 11rpx;
			box-shadow: 0 4px 4px rgba(80,80,80,0.11);
			&:last-child{
				background-image: linear-gradient(90deg, #f71f1f, #f87f3c);
			}
		}
		&-otherbtn{
			width: 685rpx;
			margin: 0 auto !important;
			background-image: linear-gradient(90deg, #f7a81f, #f87f3c) !important;
		}
	}
	.awardlist-btn{
		color: #FFFFFF;
		height: 108rpx;
		line-height: 108rpx;
		text-align: center;
		font-size: 38rpx;
		background-image: linear-gradient(145deg, #b676af, #ea669f, #f7c07e);
		width: 100%;
	}
	
	.awardlist-record{
		z-index: 10;
		background-color: #FFFFFF;
		border-radius: 15px 15px 0 0;
		position: fixed;
		bottom: -100%;
		width: 750rpx;
		left: 0;
		transform: translateY(100%);
		transition: .3s;
		padding-top: 30rpx;
		padding-bottom: 40rpx;
		text{
			flex: 1;
			text-align: center;
			color: #252525;
			font-size: 36rpx;
		}
		.close{
			position: absolute;
			right: 26rpx;
			top: 30rpx;
			z-index: 11;
		}
		.title{
			color: #252525;
			text-align: center;
			font-size: 38rpx;
			line-height: 122rpx;
		}
		.nav{
			display: flex;
			align-items: center;
			height: 76rpx;
			border-bottom: 1px solid #cccaca;
		}
		.li{
			display: flex;
			align-items: center;
			height: 66rpx;
			&:nth-child(even){
				background-color: #f8c7e3;
			}
			text{
				font-size: 32rpx;
			}
		}
		.list{
			max-height: 660rpx;
		}
		.btn{
			width: 636rpx;
			height: 94rpx;
			line-height: 94rpx;
			border-radius: 50px;
			margin: 0 auto;
			text-align: center;
			font-size: 40rpx;
			color: #FFFFFF;
			background-image: linear-gradient(145deg, #b676af, #ea669f, #f7c07e);
			margin-top: 36rpx;
		}
		&.show{
			transform: translateY(0) !important;
			bottom: 0;
		}
	}	
	.pay-box{
		.pay-item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			.item-title{
				display: flex;
				align-items: center;
				image{
					width: 74rpx;
					height: 74rpx;
				}
				.item-text{
					font-size: 28rpx;
					margin-left: 20rpx;
				}
			}
			.item-pay-icon{
				image{
					width: 43rpx;
					height: 43rpx;
					display: block;
				}
			}
		}
	}
	
	@keyframes move
	{
		0%, 65%{ 
		  -webkit-transform:rotate(0deg);
		  transform:rotate(0deg);
		}
		70% {  
		  -webkit-transform:rotate(6deg);
		  transform:rotate(6deg);
		}
		75% {  
		  -webkit-transform:rotate(-6deg);
		  transform:rotate(-6deg);
		}
		80% {  
		  -webkit-transform:rotate(6deg);
		  transform:rotate(6deg);
		}
		85% {  
		  -webkit-transform:rotate(-6deg);
		  transform:rotate(-6deg);
		}
		90% {  
		  -webkit-transform:rotate(6deg);
		  transform:rotate(6deg);
		}
		95% {  
		  -webkit-transform:rotate(-6deg);
		  transform:rotate(-6deg);
		}
		100% {  
		  -webkit-transform:rotate(0deg);
		  transform:rotate(0deg);
		}
	}
	
	.g-popup-share {
	    position: fixed;
	    left: 0;
	    bottom: -100%;
	    width: 100%;
	    background: #fff;
	    z-index: 11;
		transform: translateY(100%);
		transition: .3s;		
	}
	.g-share-type {
	    display: flex;
	    padding: 15px 0;
		button {
		    flex: 1;
		    text-align: center;
		}
		image {
		    width: 75upx;
			height: 75upx;
		}
	}
	.u-share-cancel {
	    background: #a4a4a4;
	    padding: 10px 0;
	    color: #fff;
	
	}
	.zShow {
		transform: translateY(0) !important;
		bottom: 0;
	}
	.goods-cont{
		position: relative;
		height: 320rpx;
		padding: 30rpx 0;
		&-item{
			width: 200rpx;
			position: absolute;
		}
		&-img{
			width: 165rpx;
			height: 165rpx;
			border-radius: 50%;
			position: relative;
			margin: 0 auto;
			margin-top: 20rpx;
			&-pic{
				width: 100%;
				height: 100%;
				display: block;
			}
			&-text{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				background-color: rgba($color: #848383, $alpha: 0.8);
				color: #FFFFFF;
				line-height: 44rpx;
				font-size: 24rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				font-style: oblique;
			}
		}
		&-info{
			text-align: center;
			&-name{
				width: 100%;
				line-height: 32rpx;
				font-size: 21rpx;
				overflow: hidden;
				margin-top: 20rpx;
			}
			&-mprice{
				color: #383838;
				font-size: 16rpx;
				text-decoration: line-through;
			}
			&-yprice{
				color: #d71511;
				font-size: 20rpx;
			}
			&-btn{
				width: 500rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-image: linear-gradient(145deg, #b676af, #ea669f, #f7c07e);
				color: #FFFFFF;
				font-size: 30rpx;
				text-align: center;
				border-radius: 100px;
				margin: 0 auto;
				margin-top: 20rpx;
				&.gay{
					background-color: #cccccc;
					background-image: none;
				}
			}
		}
		
		
		
		&-btnlist{
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			position: relative;
			z-index: 2;
			&-item{
				margin: 30rpx 30rpx;
			}
		}
	}
	/* 抽奖活动 */
	.number-box{
		height: 42rpx;
		width: 200rpx;
		margin: 0 auto;
		.btn{
			width: 62rpx;
			height: 42rpx;
			background-image: linear-gradient(145deg, #b676af, #ea669f, #f7c07e);
			border-width: 0px;
			position: relative;
			&.reduce{
				border-top-left-radius: 20px;
				border-bottom-left-radius: 20px;
			}
			&.plus{
				border-top-right-radius: 20px;
				border-bottom-right-radius: 20px;
				&::before{
					content: '';
					position: absolute;
					top: 50%;
					width: 2px;
					height: 20rpx;
					background-color: #FFFFFF;
					left: 50%;
					transform: translate(-50%,-50%);
				}
			}
			&::after{
				content: '';
				position: absolute;
				top: 50%;
				width: 20rpx;
				height: 2px;
				background-color: #FFFFFF;
				left: 50%;
				transform: translate(-50%,-50%);
			}
		}
		.input{
			width: 106rpx;
			height: 39rpx;
			line-height: 39rpx;
			min-height: 39rpx !important;
			text-align: center;
			font-size: 26rpx;
			border-style: solid;
			border-color: #ef709a;
			border-top-width: 2rpx;
			border-bottom-width: 2rpx;
			background-color: #ffffff;
			border-left-width: 0;
			border-right-width: 0;
		}
	}
	/deep/ .uni-noticebar{
		border-radius: 5px;
	}
	/deep/ .lottery{
		margin: 0 auto;
	}
	.lottery-redpack{
		width: 700rpx;
		height: 1245rpx;
		position: relative;
		z-index: 10;
		&-bg{
			width: 700rpx;
			height: 1245rpx;
		}
		&-open{
			position: absolute;
			z-index: 1;
			top: 480rpx;
			left: 50%;
			margin-left: -126rpx;
			width: 258rpx;
			height: 258rpx;
		}
		&-tips{
			position: absolute;
			z-index: 1;
			width: 100%;
			top: 500rpx;
			text-align: center;
			&-text{
				font-size: 57rpx;
				color: #ebae38;
			}
			&-money{
				font-size: 110rpx;
				color: #fbd41f;
				text-shadow:0px 4px 0px rgba($color: #5f5f5f, $alpha: 0.34);
			}
		}
		&-close{
			width: 86rpx;
			height: 86rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			display: block;
		}
		
		&-btns{
			position: absolute;
			left: 0;
			bottom: 280rpx;
			width: 100%;
			z-index: 10;
			&-item{
				width: 226rpx;
				height: 76rpx;
				line-height: 76rpx;
				border-radius: 50px;
				text-align: center;
				color: #FFFFFF;
				font-size: 32rpx;
				margin: 26rpx 30rpx;
			}
			.left{
				background-image: linear-gradient(to top, #f22517, #fd514a);
				box-shadow:0px 9rpx 3rpx rgba(108,13,11, 0.3);
			}
			.right{
				background-color: #f56118;
				box-shadow:0px 9rpx 3rpx rgba(177,69,15, 0.3);
			}
		}
		&-double{
			&-list{
				&-item{
					position: relative;
					width: 350rpx;
					height: 430rpx;
					margin: 0 10rpx;
					&-bg{
						width: 350rpx;
						height: 430rpx;
					}
					&-open{
						position: absolute;
						z-index: 1;
						top: 257rpx;
						left: 50%;
						margin-left: -60rpx;
						width: 120rpx;
						height: 120rpx;
					}
					&-tips{
						position: absolute;
						z-index: 1;
						width: 100%;
						top: 256rpx;
						text-align: center;
						&-money{
							font-size: 82rpx;
							color: #fbd41f;
							text-shadow:0px 4px 0px rgba($color: #5f5f5f, $alpha: 0.34);
						}
					}
				}
			}
			.doubleBtn{
				position: relative;
				z-index: 10;
				margin-top: -50rpx;
				.lottery-redpack-btns-item{
					margin: 0 28rpx;
				}
			}
		}
		
		&-moneylist{
			&-item{
				position: absolute;
				z-index: 9;
				color: #fbd41f;
				font-size: 48rpx;
				font-weight: bold;
				width: 198rpx;
				text-align: center;
			}
			.money0{
				top: 150rpx;
				left: 28rpx;
			}
			.money1{
				top: 150rpx;
				right: 28rpx;
			}
			.money2{
				bottom: 110rpx;
				left: 28rpx;
			}
			.money3{
				bottom: 110rpx;
				right: 28rpx;
			}
		}
		&-bgLight{
			position: absolute;
			width: 800rpx;
			height: 800rpx;
			top: 50%;
			left: 50%;
			margin-top: -400rpx;
			margin-left: -400rpx;
			animation: lightAnimation 5s infinite linear;
			z-index: -1;
		}
	}
	.open-animation{
		animation: trun 0.8s infinite;
	}
	@keyframes lightAnimation {
	    0% {
	        -webkit-transform: rotate(0deg);
	    }
	    50% {
	        -webkit-transform: rotate(180deg);
	    }
	    100% {
	        -webkit-transform: rotate(360deg);
	    }
	}
	@keyframes trun
	{
		0%{ 
		  transform: rotateY(0deg);
		}
		50%{
		  transform: rotateY(180deg);
		}
		100% {  
		  transform: rotateY(360deg);
		}
	}
	@keyframes goodsMove1
	{
		0%{ 
		  transform: translateY(0);
		}
		50%{
		  transform: translateY(10px);
		}
		100% {  
		  transform: translateY(0);
		  
		}
	}
	@keyframes goodsScale
	{
		0%{ 
		  transform: scale(1);
		}
		50%{
		  transform: scale(1.22);
		}
		100% {  
		  transform: scale(1);
		}
	}
	.redPackRain{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.redPackRainCattle{
		position: fixed;
		transform: translateY(13%);
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.g-lottery-cont{
		background-color: #FFFFFF;
		position: fixed;
		width: 600rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 99;
		border-radius: 3px;
		overflow: hidden;
		&-input{
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			color: #999;
			position: relative;
			input{
				width: 250rpx;
				border-bottom: 1px solid #999;
				margin-left: 20rpx;
				text-align: center;
			}
			&::after{
				content: " ";
				position: absolute;
				left: 0;
				bottom: 0;
				right: 0;
				height: 1px;
				border-top: 1px solid #d5d5d6;
				color: #d5d5d6;
				transform-origin: 0 0;
				transform: scaleY(.5);
			}
		}
		&-btns{
			display: flex;
			justify-content: center;
			&-item{
				width: 50%;
				box-sizing: border-box;
				text-align: center;
				font-size: 36rpx;
				line-height: 96rpx;
				position: relative;
				&:last-child{
					color: #007aff;
					&::after{
						content: " ";
						position: absolute;
						left: 0;
						top: 0;
						width: 1px;
						bottom: 0;
						border-left: 1px solid #d5d5d6;
						color: #d5d5d6;
						transform-origin: 0 0;
						transform: scaleX(.5);
					}
				}
			}
		}
	}
	.goodsScale{
		animation: goodsScale 5s infinite;
	}
	.goodsMove{
		animation: goodsMove1 5s infinite;
		.goods-cont-info-name{
			font-size: 26rpx;
		}
		.goods-cont-info-mprice{
			font-size: 20rpx;
		}
		.goods-cont-info-yprice{
			font-size: 24rpx;
		}
	}
	.swiper-btn{
		position: absolute;
		z-index: 2;
		top: 0;
		width: 30rpx;
		height: 30rpx;
		&.next{
			right: 0;
		}
	}
	.lottery-bannerEnter{
		display: flex;
		justify-content: center;
		image{
			border-radius: 10rpx;
			overflow: hidden;
			width: 666rpx;
		}
	}
	.lottery-noticeBar{
		width: 666rpx;
		margin: 0 auto;
	}
	.lottery-functionList{
		position: fixed;
		z-index: 3;
		bottom: 0;
		right: 35rpx;
		width: 104rpx;
		&-list{
			transform: translateY(150%);
			transition: .3s;
		}
		&-item{
			margin-bottom: 25rpx;
			&-icon{
				width: 78rpx;
				height: 78rpx;
				display: block;
				margin: 0 auto;
			}
			&-text{
				text-align: center;
				font-size: 26rpx;
				padding-top: 10rpx;
			}
		}
		&-arrow{
			&-item{
				margin: 0 auto;
				&:first-child{
					margin-bottom: -30rpx;
				}
			}
		}
		.show{
			transform: translateY(0) !important;
			bottom: 0;
		}
	}
</style>
